<template>
    <el-dialog :visible.sync="v"
               :title="termTitle"
               @opened="doOpened"
               @open="doOpen"
               @close="doClose"
               width="80%"
               center
    >
        <el-slider v-model="sliderV"
                   v-if="sliderMax >0"
                   :min="sliderMin"
                   :max="sliderMax"
                   show-input
                   @change="doSliderChange"
        ></el-slider>

        <div ref="terminal"></div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="v = false" class="el-radio-button__inner cancelButton">取消</el-button>
            <el-radio-group v-model="status" @change="doChangeStatus">
                <el-radio-button :key="dict.item_name" :label="dict.item_value" v-for="dict in auditOptions">{{dict.item_name
                    }}</el-radio-button>
            </el-radio-group>
        </div>
    </el-dialog>
</template>

<script>
    import {Terminal} from "xterm";
    import * as fit from "xterm/lib/addons/fit/fit";
    import * as webLinks from "xterm/lib/addons/webLinks/webLinks";
    import * as search from "xterm/lib/addons/search/search";
    import "xterm/dist/xterm.css"
    import infoList from '@/mixins/infoList'
    import {
        updateJumpServerSshLogs,
    }from "@/api/jump_server_logs";
    export default {
        props: {obj: {type: Object, require: true}, visible: Boolean},
        name: "CompSshLog",
        mixins: [infoList],
        data() {
            return {
                sliderV: 0,
                sliderMin: 0,
                sliderMax: 0,
                auditOptions:[],
                status: this.obj.status,
                searchKey: "",
                v: this.visible,
                term: null,
                thisV: this.visible
            };
        },
        watch: {
            visible(val) {
                this.v = val;//新增result的watch，监听变更并同步到myResult上
            }
        },
        computed: {
            termTitle() {
                return `网页终端日志:${this.obj.StartedAt} - ${this.obj.CreatedAt}`
            }
        },
        created() {
            this.auditOptions = this.getDicItemList('ssh_audit_status')
        },
        methods: {
            doLink(ev, url) {
                if (ev.type === 'click') {
                    window.open(url)
                }
            },
            doClose() {
                if (this.term) {
                    this.term.dispose()
                }
                this.$emit('afterClose')
            },
            doOpen() {
                let ts = JSON.parse(this.obj.web_client_logs);
                if (ts && Array.isArray(ts)) {
                    const len = ts.length;
                    this.sliderMax = len + 1;
                    this.sliderMin = 0;
                    this.sliderV = len + 1;
                }
                this.status = this.obj.status;
            },
            doChangeStatus() {
                let id = this.obj.ID;
                let status = parseInt(this.status);
                updateJumpServerSshLogs({ 'id':id,'status':status }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '日志标记成功',
                        })
                        this.v = false;
                    }
                });
            },
            doOpened() {
                Terminal.applyAddon(fit);
                Terminal.applyAddon(webLinks);
                Terminal.applyAddon(search);
                //TODO 网页终端添加搜索功能
                this.term = new Terminal({
                    disableStdin: true,
                    fontSize: 18,
                    cursorBlink: false,
                    cursorStyle: 'bar',
                    bellStyle: "sound",
                });
                this.term.open(this.$refs.terminal);
                this.term.fit(); // first resizing
                this.term.webLinksInit(this.doLink);
                // term.on("resize", this.onTerminalResize);
                this.doSliderChange()
            },
            doSliderChange() {
                let tlogs = JSON.parse(this.obj.web_client_logs);
                let thres = this.sliderV;
                let term = this.term;
                term.clear();
                if (tlogs && Array.isArray(tlogs)) {
                    tlogs.forEach((msg, idx) => {
                        if (idx <= thres) {
                            term.write(msg)
                        }
                    })
                }
            },

        },
    }
</script>

<style>
.cancelButton{
    padding: 12px 17px!important;
    border-right: none;
}

</style>
